<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>考勤状况</title>
    <link rel="stylesheet" href="/addons/jquery-weui-build/css/weui.min.css">
    <link rel="stylesheet" href="/addons/jquery-weui-build/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/system/main.css?v=2018050202">
    <style>
        body{
            background: #fff;
        }
    </style>
</head>
<body ontouchstart>
<div class="index-review month-perform">
    <div class="header-bk">
        <div class="con-head">
            <img @if(empty($user->logo)) src="../../images/system/ps1.png" @else src="{{url($user->logo)}}" @endif><span class="user-name">@if(!empty($uid)){{getUserName($uid)}}@endif</span>
            <p style="display: inline-block;font-size: 16px;margin-left: 4%">@if(!empty($att)){{$att->date}}@endif</p>
            <p class="p-right"><span class="circle-s"></span>考勤状况<span class="mon-num">@if(!empty($att))-{{$att->score}}@else空@endif</span></p>
        </div>
    </div>
    <div class="calendar-con">
        <div class="calen-con">
            <div class="account-box">
                <div class="f-rili-table">
                    <div class="f-rili-head celarfix">
                        <div class="f-rili-th">周日</div>
                        <div class="f-rili-th">周一</div>
                        <div class="f-rili-th">周二</div>
                        <div class="f-rili-th">周三</div>
                        <div class="f-rili-th">周四</div>
                        <div class="f-rili-th">周五</div>
                        <div class="f-rili-th">周六</div>
                        <div class="clear"></div>
                    </div>
                    <div class="f-tbody clearfix">
                    </div>
                </div>
            </div>
        </div>
        <ul class="show-event">
            <li><span></span>事假</li>
            <li><span></span>病假</li>
            <li><span></span>迟到/早退</li>
            <li><span></span>旷工</li>
        </ul>
        <p class="explain">考勤打分说明：
            @foreach($att_score as $k=>$m)
                {{$k}}扣{{$m}}分,
            @endforeach
        </p>
    </div>
</div>
<div class="show-hidden">
    <ul>
        <li><a href="{{url('/user/performance/detail')}}"><img src="../../images/system/user.png">我的考评</a></li>
        <li><a href="{{url('/user/performance/index')}}"><img src="../../images/system/all.png">全员考评</a></li>
        <li><a href="{{url('/user/performance/month')}}"><img src="../../images/system/message.png">月度意见</a></li>
    </ul>
</div>
<div class="reful-tabbar">
    <a href="javascript:void(0)" class="find-link tabbar-item active">
        <div class="img-div">
        </div>
        <p class="tabbar-label">考评</p>
    </a>
    <a href="{{url('/user/message')}}" class="message-center tabbar-item">
        <div class="img-div">
        </div>
        <p class="tabbar-label">消息中心</p>
    </a>
    <a href="{{url('/user/reward')}}" class="reward-punishment tabbar-item">
        <div class="img-div">
        </div>
        <p class="tabbar-label">奖励惩罚</p>
    </a>
    <a href="{{url('/user/setting')}}" class="set-up tabbar-item">
        <div class="img-div">
        </div>
        <p class="tabbar-label">设置</p>
    </a>
</div>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/addons/jquery-weui-build/js/fastclick.js"></script>
<script>
    $(function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });
</script>
<script src="/addons/jquery-weui-build/js/jquery-weui.min.js"></script>
<script>
    $(function(){
        $('.find-link').click(function () {
            $('.show-hidden').toggle();
        });
        //页面加载初始化年月
        var json = {};
        @if(isset($j))
        @foreach($j as $k=>$l)
                json['{{$k}}'] = '{{$l}}';
        @endforeach
        @endif
        //json[6]='first';json[12]='second';json[22]='third';json[25]='four';

        var mydate = new Date();
//        showDate(2017,7)示例
        showDate(mydate.getFullYear(),mydate.getMonth()+1);

        //读取年月写入日历  重点算法!!!!!!!!!!!
        function showDate(yyyy,mm){
            var dd = new Date(parseInt(yyyy),parseInt(mm), 0);   //Wed Mar 31 00:00:00 UTC+0800 2010
            var daysCount = dd.getDate();            //本月天数
            var mystr ="";//写入代码
            var icon = "";//图标代码
            var today = new Date().getDate(); //今天几号  11
            var monthstart = new Date(parseInt(yyyy)+"/"+parseInt(mm)+"/1").getDay()//本月1日周几
            var lastMonth; //上一月天数
            var nextMounth//下一月天数
            if(  parseInt(mm) ==1 ){
                lastMonth = new Date(parseInt(yyyy)-1,parseInt(12), 0).getDate();
            }else{
                lastMonth = new Date(parseInt(yyyy),parseInt(mm)-1, 0).getDate();
            }
            if( parseInt(mm) ==12 ){
                nextMounth = new Date(parseInt(yyyy)+1,parseInt(1), 0).getDate();
            }else{
                nextMounth = new Date(parseInt(yyyy),parseInt(mm)+1, 0).getDate();
            }
            //计算上月空格数
            for(j=monthstart;j>0;j--){
                mystr += "<div class='f-td f-null f-lastMonth' style='color:#ccc;'>"+(lastMonth-j+1)+"</div>";
            }

            //本月单元格
            for(i=0;i<daysCount;i++){
                //这里为一个单元格，添加内容在此
                mystr += "<div class='f-td f-number'><span class='f-day'>"+(i+1)+"</span>"+"</div>";

            }

            //计算下月空格数
            for(k=0; k<35-(daysCount+monthstart);k++ ){//表格保持等高6行42个单元格
                mystr += "<div class='f-td f-null f-nextMounth' style='color:#ccc;'>"+(k+1)+"</div>";
            }

            //写入日历
            $(".f-rili-table .f-tbody").html(mystr);
            //给今日加class
//            if( mydate.getFullYear() == yyyy){
//                if( (mydate.getMonth()+1 ) == mm){
//                    var today = mydate.getDate();
//                    var lastNum = $(".f-lastMonth").length;
//                    $(".f-rili-table .f-td").eq(today+lastNum-1).addClass("f-today");
//                }
//            }
            //绑定选择方法
//            $(".f-rili-table .f-number").off("click");
//            $(".f-rili-table .f-number").on("click",function(){
//                $(".f-rili-table .f-number").removeClass("f-on");
//                $(this).addClass("f-on");
//            });

        }
//        添加事件时间
        $('.f-tbody .f-number .f-day').each(function(){
            var that =this;
            $.each(json,function(_key){
                var key = _key;
                var value = json[_key];
                if(_key==$(that).html()){
                    $(that).addClass(json[_key]);
                }
            });
        })

    })

</script>
</body>
</html>